<template>
	<div id="container">
		<header>
			<van-nav-bar
			  :fixed="true"
			  title="礼品卡"
			  left-text="返回"
			  left-arrow
			  @click-left="onClickLeft"
			/>
		</header>
		<div id="content">
			<!-- gift-content-img -->
			<div class="gift-img">
				<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4032716433,1678117009&fm=26&gp=0.jpg" alt="">
			</div>
			<!-- gift-content-sort -->
			<div class="gift-sort">
				<figure>
					<div class="gift-icon"><van-icon name="credit-pay" /></div>
					<p>余额查询/充值</p>
				</figure>
				<figure>
					<div class="gift-icon"><van-icon name="gift-o" /></div>
					<p>我的礼包</p>
				</figure>
				<figure>
					<div class="gift-icon"><van-icon name="records" /></div>
					<p>常见问题</p>
				</figure>
			</div>
			<!-- gift-tip -->
			<div class="gift-tip">
				<van-nav-bar left-text="热销礼品卡"/>
			</div>
			<!-- gift-card -->
			<div class="gift-card">
				<figure>
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572685846429&di=94732d891b59056b6e71a6f6c675c2d0&imgtype=0&src=http%3A%2F%2Fwww.zqyb.net%2FUploadFiles%2Fcsxfk%2F2013%2F4%2F201304121503482757.jpg" alt="">
					<figcaption>东方购物 心意随想电子卡(自定义面值)</figcaption>
					<p>￥1</p>
				</figure>
				<figure>
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572685846429&di=94732d891b59056b6e71a6f6c675c2d0&imgtype=0&src=http%3A%2F%2Fwww.zqyb.net%2FUploadFiles%2Fcsxfk%2F2013%2F4%2F201304121503482757.jpg" alt="">
					<figcaption>东方购物 随意订电子卡(20元面值)</figcaption>
					<p>￥20</p>
				</figure>
				<figure>
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572685846429&di=94732d891b59056b6e71a6f6c675c2d0&imgtype=0&src=http%3A%2F%2Fwww.zqyb.net%2FUploadFiles%2Fcsxfk%2F2013%2F4%2F201304121503482757.jpg" alt="">
					<figcaption>东方购物 感恩电子卡电子卡(1000元面值)</figcaption>
					<p>￥1000</p>
				</figure>
				<figure>
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572685846429&di=94732d891b59056b6e71a6f6c675c2d0&imgtype=0&src=http%3A%2F%2Fwww.zqyb.net%2FUploadFiles%2Fcsxfk%2F2013%2F4%2F201304121503482757.jpg" alt="">
					<figcaption>东方购物 温馨电子卡(500元面值)</figcaption>
					<p>￥500</p>
				</figure>
				<figure>
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572685846429&di=94732d891b59056b6e71a6f6c675c2d0&imgtype=0&src=http%3A%2F%2Fwww.zqyb.net%2FUploadFiles%2Fcsxfk%2F2013%2F4%2F201304121503482757.jpg" alt="">
					<figcaption>东方购物 心意随想电子卡(自定义面值)</figcaption>
					<p>￥10</p>
				</figure>
				<figure>
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572685846429&di=94732d891b59056b6e71a6f6c675c2d0&imgtype=0&src=http%3A%2F%2Fwww.zqyb.net%2FUploadFiles%2Fcsxfk%2F2013%2F4%2F201304121503482757.jpg" alt="">
					<figcaption>东方购物 随意订电子卡(20元面值)</figcaption>
					<p>￥200</p>
				</figure>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"Gift",
		methods:{
			onClickLeft(){
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
#container{
	height: 100vh;
	background: #ecf1f1;
}
figure,figcaption,p{
	padding: 0;
	margin: 0;
}
/*------------------------ header -----------*/
header .van-nav-bar{
	height:47px;
	z-index: 99 !important;
}
header .van-nav-bar__title{
	font-size:18px;
	font-weight:600;
	font-family:"楷体";
	color:#3c3c3c;
}
.van-nav-bar__text,.van-nav-bar__arrow{
	color:#2b2b2b;
	font-size:16px;
}
header .van-nav-bar__text{
	font-family: "楷体";
	font-weight:600;
}
/* ---------------gift-content------------- */
#content{
	/* background: #f3f3f3; */
	height: 100%;
	margin-top: 47px;
}
/*----------------- gift-img ---------------*/
.gift-img {
	height: 116px;
	width: 100%;
}
.gift-img img{
	height: 100%;
	width: 100%;
}
/* -----------------gift-sort-------------- */
.gift-sort{
	height: 125px;
	background: #fff;
	display: flex;
	margin-bottom: 10px;
}
.gift-sort figure{
	width: 33%;
	display: flex;
	flex-direction: column;
	align-items: center;

}
.gift-sort figure div{
	width:52px;
	height: 52px;
	border-radius: 26px;
	background:#fc7f6b;
	text-align: center;
}
.gift-sort figure .gift-icon{
	font-size:25px;
	line-height: 52px;
	color:#fefdf9;
	margin-top: 25px;
	margin-bottom: 13px;
}
.gift-sort figure figcaption{
	font-size: 12px;
	font-family: "楷体";
}
/* ----------------gift-card------------ */
.gift-card{
	display: flex;
	flex-wrap: wrap;
}
.gift-card figure{
	width: 50%;
	height: 311px;
	box-sizing: border-box;
	background:#fff;
	border: 1px solid #f3f3f3;
}
.gift-card figure img{
	width: 135px;
	height: 87px;
	margin: 48px 26px 60px 26px;
}
.gift-card figure figcaption{
	font-size: 12px;
	font-family: "楷体";
	color:#353535;
	margin-left:18px;
	margin-right: 24px;
	font-weight: 600;
}
.gift-card figure p{
	margin-top: 11px;
	font-size: 14px;
	color: #d01d23;
	font-weight: 600;
	margin-left:18px;
}

</style>
